<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>EventBus Demo</title>
  <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
	下述代码中，我首先引入了mitt库，并创建了一个事件总线实例emitter，<br>
	接着分别演示了父传子、子传父和非父子传递三种通信方式的使用。<br>
	对于每种通信方式，我打算先通过on方法监听事件，再通过emit方法触发并传入需要传播的数据。<br>
  <div id="app">
    <!-- 父组件 209000627 何函杰-->
    <div>
      <button @click="fatherToSon">点击向子组件传播</button>
    </div>

    <!-- 子组件 209000627 何函杰-->
    <div>
      <button @click="sonToFather">点击向父组件传播</button>
    </div>

    <!-- 组件A （非父子传递）209000627 何函杰-->
    <div>
      <button @click="nonParentChild">点击向其他组件传递</button>
    </div>
  </div>
  <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
  <script>
    const emitter = mitt();
    
    new Vue({
      el: '#app',
      methods: {
        fatherToSon() {
          emitter.emit('fatherToSon', { data: '这是来自父组件的数据' });
        },
        sonToFather() {
          emitter.emit('sonToFather', { data: '这是来自子组件的数据' });
        },
        nonParentChild() {
          emitter.emit('nonParentChild', { data: '这是来自组件A（非父子传递）的数据' });
        }
      }
    });

    // 父传子通信
    emitter.on('fatherToSon', (params) => {
      console.log(params.data); // 这是来自父组件的数据
    });

    // 子传父通信
    emitter.on('sonToFather', (params) => {
      console.log(params.data); // 这是来自子组件的数据
    });

    // 非父子传递
    emitter.on('nonParentChild', (params) => {
      console.log(params.data); // 这是来自组件A的数据
    });
  </script>
</body>
</html>
